<template>
  <view style="height: 100vh; background: #fff">
    <image class="bg" src="../../static/home/bg.png" mode="aspectFill" />
    <u-navbar title="更多模板" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
    <div class="con">
      <view class="imageBox">
        <view class="imgB" v-for="(item, index) in list" :key="index">
          <image
            class="IMG"
            :src="item.preview"
            @click="
              TanPreviewImage(
                list.map((i) => i.preview),
                index
              )
            "
            mode="aspectFill"
          />
          <u-button type="primary" shape="circle" color="#b8cafd" @click="useFn(item)">使用</u-button>
        </view>
      </view>
    </div>
  </view>
</template>
<script setup lang="ts">
import { getTemplateList } from "@/api/my";
import { useFilesStore } from "@/stores/files";
import { TanPreviewImage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
onMounted(async () => {
  getList();
});
const pageStatus = ref("loadmore");
const page = ref(1);
const list = ref<any[]>([]);
const getList = async () => {
  if (pageStatus.value == "nomore") {
    return;
  }
  pageStatus.value = "loadmore";
  const res: any = await getTemplateList({
    pageNum: page.value,
  });
  list.value = list.value.concat(res.rows);
  if (list.value.length >= (res.total as number)) {
    pageStatus.value = "nomore";
  } else {
    pageStatus.value = "loadmore";
  }
};
onReachBottom(() => {
  page.value++;
  getList();
});

const useFn = (info: any) => {
  useFilesStore().setUseTemplate(info);
  uni.navigateBack();
};
</script>
<style lang="less" scoped>
.bg {
  width: 100%;
  height: 1362rpx;
  position: absolute;
  left: 0;
  z-index: 1;
}
.con {
  position: relative;
  padding: 0 30rpx;
  z-index: 2;
  padding-top: 200rpx;
  .imageBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .imgB {
      width: 49%;
      margin-bottom: 16rpx;
      position: relative;
      overflow: hidden;
      .IMG {
        width: 100%;
        height: 540rpx;
        border-radius: 10rpx;
      }
    }
  }
}
</style>
